<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>基于 layui 的极简社区页面模版</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="./res/layui/css/layui.css">
  <link rel="stylesheet" href="./res/css/global.css">
  <style type="text/css">

.layui-table-cell{

    text-align:center;

    height: auto;

    white-space: normal;

}

.layui-table img{

    max-width:500px

}
</style>
</head>

<body>

  <div class="fly-header layui-bg-black">
    <div class="layui-container">
      <a class="fly-logo" href="/">
        <!-- <img src="./res/images/logo.png" alt="layui"> -->
        <h1 style="color:#fff">LOGO</h1>
      </a>
      <ul class="layui-nav fly-nav layui-hide-xs">
        <li class="layui-nav-item layui-this">
          <a href="index.html">任务大厅</a>
        </li>
        <li class="layui-nav-item">
          <a href="#">我是下单方</a>
        </li>
        <li class="layui-nav-item">
          <a href="#" target="_blank">我是接单方</a>
        </li>
        <li class="layui-nav-item">
          <a href="#" target="_blank">已认证联盟</a>
        </li>
      </ul>

      <ul class="layui-nav fly-nav-user">

        <!-- 未登入的状态 -->
        <li class="layui-nav-item">
          <a class="iconfont icon-touxiang layui-hide-xs" href="login.html"></a>
        </li>
        <li class="layui-nav-item">
          <a href="login.html">登录</a>
        </li>
        <li class="layui-nav-item">
          <a href="reg.html">注册</a>
        </li>

        <!-- 登入后的状态 -->
        <!--
      <li class="layui-nav-item">
        <a class="fly-nav-avatar" href="javascript:;">
          <cite class="layui-hide-xs">贤心</cite>
          <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
          <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
          <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
        </a>
        <dl class="layui-nav-child">
          <dd><a href="user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
          <dd><a href="user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
          <dd><a href="user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
          <hr style="margin: 5px 0;">
          <dd><a href="/user/logout/" style="text-align: center;">退出</a></dd>
        </dl>
      </li>
      -->
      </ul>
    </div>
  </div>

  <div class="fly-panel fly-column">
    <div class="layui-container">


      <div class="fly-column-left layui-hide-xs">
        <!-- <span class="fly-search"><i class="layui-icon"></i></span>  -->
        <a href="add.html" class="layui-btn">发布任务</a>
        <div class="layui-input-inline" style="padding-left:10px; width: 300px;">
          <input type="tel" name="keywords" lay-verify="required" autocomplete="off" placeholder="输入关键字搜索" class="layui-input">
        </div>
        <button class="layui-btn" style="padding-left:20px">搜索</button>
      </div>
    </div>
  </div>

  <!-- <div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
      
    </div>
    <div class="layui-col-md4">

    </div>
  </div>
</div> -->

  <div class="layui-container">
    <table class="layui-hide" id="taskList" lay-filter="taskList"></table>
  </div>

  <div class="fly-footer">
    <p><a href="http://fly.layui.com/" target="_blank">中恒业</a> 2020 &copy; <a href="#" target="_blank">中恒业</a></p>
    <p>
      <a href="#" target="_blank">任务大厅</a>
      <a href="#" target="_blank">我是下单方</a>
      <a href="#" target="_blank">微信公众号</a>
    </p>
  </div>

  <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>

  <script src="./res/layui/layui.js"></script>
  <script>
    layui.cache.page = '';
    layui.cache.user = {
      username: '游客'
      , uid: -1
      , avatar: './res/images/avatar/00.jpg'
      , experience: 83
      , sex: '男'
    };
    layui.config({
      version: "3.0.0"
      , base: './res/mods/' //这里实际使用时，建议改成绝对路径
    }).extend({
      fly: 'index'
    }).use('fly');

    var pageLoadIndex,$;
    function pageLoading(that){
      //添加页码禁用样式
      $(".layui-box").find("a").addClass("layui-disabled");
      //添加表格的loading动画
      pageLoadIndex = layer.load(2,{shade:[0.2,'#393D49']});
    }
    layui.use('table', function(){
      $ = layui.$;
      var table = layui.table;
      table.render({
        elem: '#taskList'
        ,url:'taskList.json'
        ,cols: [[
          {field:'id', width:150,title: '图片',templet: function(d){
            return '<div οnclick="show_img(this)" class="openImage" lay-event="openImage"><img src="./res/images/avatar/1.jpg" alt="" width="120px"></a></div>';
          }}
          ,{field:'username', width:160, title: '标题'}
          ,{field:'sex', width:80, title: '包邮'}
          ,{field:'city', width:80, title: '券后价'}
          ,{field:'sign', width:130, title: '佣金比例(%)', sort: true}
          ,{field:'experience', width:130, title: '任务单价(元)', sort: true}
          ,{field:'score', width:80, title: '数量', sort: true}
          ,{field:'classify', width:100, title: '任务状态',templet:function(d){
            return '<a class="layui-btn layui-btn-xs" lay-event="edit">进行中</a>';
          }}
          ,{field:'wealth', title: '操作',templet:function(d){
            return '<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="jiedan">接单</a>';
          }}
          ,{field:'wealth', width:135, title: '备注'}
        ]]
        ,page: true
        ,done: function(){
           // 添加分页加载动画的函数    
          $('.layui-laypage > a').each(function(){
              $(this).attr('onclick',"pageLoading(this)");
          });
          //选择页码
          $(".layui-laypage-limits").attr("change","pageLoading(this)");
          //点击确定
          $(".layui-laypage-btn").attr("change","pageLoading(this)");
          //页面输入框回车
          $(".layui-laypage-skip input").keydown(function(e){
              if(e.keyCode == 13){
                pageLoading(this);
              }
          })
          layer.close(pageLoadIndex); // 渲染完成后关闭动画

          $("html,body").animate({"scrollTop":0});
        }
      });

      //监听工具条
      table.on('tool(taskList)', function(obj){
        var data = obj.data;
        if(obj.event === 'jiedan'){
          layer.msg('ID：'+ data.id + ' 的查看操作');
        } else if(obj.event === 'openImage'){
          layer.tips('<div style="width:200px;height:200px"></div>', '.openImage');
        } else if(obj.event === 'edit'){
          layer.alert('编辑行：<br>'+ JSON.stringify(data))
        }
      });
  });
    //显示大图片
    function show_img(t) {
      //alert(111)
      // var t = $(t).find("img");
      // //页面层
      // layer.open({
      //   type: 1,
      //   skin: 'layui-layer-rim', //加上边框
      //    area: ['80%', '80%'], //宽高
      //   shadeClose: true, //开启遮罩关闭
      //   end: function (index, layero) {
      //     return false;
      //   },
      //   content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
      // });
    }
  </script>

</body>

</html>